<template>
	<view class="progress-level">
		<view class="label">个数</view>

		<view class="bar-wrapper" :style="{ width: (totalWidth + gapTotal) + 'rpx' }">
			<!-- 分段条（带间隙） -->
			<view class="bar">
				<view v-for="(seg, i) in computedSegments" :key="i" class="segment" :style="{
            width: seg.width + 'rpx',
            background: seg.color,
            marginRight: i < computedSegments.length - 1 ? gap + 'rpx' : '0'
          }"></view>
			</view>

			<!-- 当前值气泡 + 圆点 -->
		<!-- 	<view class="marker" :style="{ left: markerLeft + 'rpx', zIndex: 999 }">
				<view class="bubble">{{ displayValue }}</view>
				<view class="dot"></view>
			</view> -->
		</view>
		<view class="marker" :style="{ left: markerLeft + 'rpx', zIndex: 999 }">
			<view class="bubble">{{ displayValue }}</view>
			<view class="dot"></view>
		</view>

		<!-- 底部刻度 -->
		<view class="marks" :style="{ width: (totalWidth + gapTotal) + 'rpx' }">
			<view v-for="(m, i) in marks" :key="i">
				<view v-if="i!=0" class="mark" :style="{ left:markPositions[i]-10 + 'rpx' }">
					{{ m }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'ProgressLevel',
		props: {
			// 当前值（必须传入或用默认）
			value: {
				type: Number,
				default: 67
			},
			// 刻度数组：最小到最大
			marks: {
				type: Array,
				default: () => [60, 85, 100, 120]
			},
			// 段颜色（数量 = marks.length - 1）
			colors: {
				type: Array,
				default: () => ['#FFD77A', '#FFC54B', '#FFB01E']
			},
			// 总条宽（单位 rpx，不含 gaps）
			totalWidth: {
				type: Number,
				default: 580
			},
			// 每段间隙（rpx）
			gap: {
				type: Number,
				default: 8
			}
		},
		data() {
			return {
				markerLeft: 0
			}
		},
		computed: {
			// 计算每段宽（rpx）并返回段数组
			computedSegments() {
				const arr = []
				const min = this.marks[0]
				const max = this.marks[this.marks.length - 1]
				const totalRange = max - min
				for (let i = 0; i < this.marks.length - 1; i++) {
					const segRange = this.marks[i + 1] - this.marks[i]
					const segWidth = (segRange / totalRange) * this.totalWidth
					arr.push({
						width: segWidth,
						color: this.colors[i] || '#ccc'
					})
				}
				return arr
			},
			// 总间隙宽度
			gapTotal() {
				return Math.max(0, (this.computedSegments.length - 1) * this.gap)
			},
			// 用于底部刻度位置（rpx 相对左侧）
			markPositions() {
				const positions = []
				const min = this.marks[0]
				const max = this.marks[this.marks.length - 1]
				const totalRange = max - min
				// 先构建每段累积宽度（包含 gap）
				let acc = 0
				for (let i = 0; i < this.marks.length; i++) {
					if (i === 0) {
						positions.push(0)
					} else {
						// previous segment width + gap
						acc += this.computedSegments[i - 1].width
						// add previous gap
						acc += this.gap
						positions.push(Math.round(acc))
					}
				}
				return positions
			},
			// 显示的值字符串（容错）
			displayValue() {
				if (typeof this.value !== 'number' || isNaN(this.value)) return '--'
				return this.value
			}
		},
		watch: {
			value: {
				immediate: true,
				handler() {
					this.$nextTick(() => {
						this.updateMarker()
					})
				}
			}
		},
		methods: {
			getleft(i) {
				console.log(this.markPositions());
				if (i == this.markPositions().length - 1) {
					this.markPositions()[i] - 10;
				} else {
					this.markPositions()[i]
				}

			},

			updateMarker() {
				// 安全检查
				if (!Array.isArray(this.marks) || this.marks.length < 2) {
					console.error('ProgressLevel: marks 必须为至少两个元素的数组')
					return
				}
				const min = this.marks[0]
				const max = this.marks[this.marks.length - 1]
				let v = this.value
				if (v < min) v = min
				if (v > max) v = max

				const totalRange = max - min
				const percent = (v - min) / totalRange

				// 计算 markerLeft：将 percent 映射到所有段 + gaps 的总宽
				const fullWidth = this.totalWidth + this.gapTotal
				this.markerLeft = Math.round(percent * fullWidth)

				// 调试输出（方便查看计算）
				// 在小程序开发者工具的控制台看这些日志：
				console.log('ProgressLevel updateMarker:', {
					value: this.value,
					min,
					max,
					percent,
					markerLeft: this.markerLeft,
					totalWidth: this.totalWidth,
					gapTotal: this.gapTotal
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.progress-level {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
		box-sizing: border-box;	
		// height: 100rpx;
		position: relative;
		width: 100%;
		

	}

	/* 左侧 label（可按需放左或上） */
	.label {
		position: absolute;
		bottom: 0rpx;
		left: 0;
		font-size: 28rpx;
		color: #999;
		margin-bottom: 12rpx;
	}

	/* 包裹区域（用于定位 marker） */
	.bar-wrapper {
		position: relative;
		margin-top: 30rpx;
		height: 30rpx;
		/* 足够放气泡和点 */
		overflow: visible;
	}

	/* 实际条（容器） */
	.bar {
		display: flex;
		align-items: center;
		height: 18rpx;
		border-radius: 10rpx;
		overflow: visible;
	}

	/* 每段块 */
	.segment {
		height: 100%;
		border-radius: 4rpx;
		transform: skewX(-20deg);
	}

	/* marker：气泡 + 点 */
	.marker {
		position: absolute;
		top: 0;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		pointer-events: none;
	}

	/* 气泡 */
	.bubble {
		background: #FDF2DA;
		color: #333;
		padding: 2rpx 14rpx;
		border-radius: 4rpx;
		font-size: 24rpx;
		white-space: nowrap;
		box-shadow: 0 4rpx 6rpx rgba(0, 0, 0, 0.15);
		margin-bottom: 8rpx;
	}

	/* 气泡小箭头 */
	// .bubble::after {
	// 	content: "";
	// 	position: absolute;
	// 	bottom: -5rpx;
	// 	left: 50%;
	// 	transform: translateX(-50%);
	// 	border-width: 6rpx;
	// 	border-style: solid;
	// 	border-color: #222 transparent transparent transparent;
	// }

	/* 圆点 */
	.dot {
		// width: 18rpx;
		// height: 18rpx;
		// background: #ff9800;
		border-radius: 50%;
		// border: 4rpx solid #fff;
		// box-shadow: 0 0 8rpx rgba(255, 152, 0, 0.35);
		width: 26rpx;
		height: 26rpx;
		background: #F8B503;
		box-sizing: border-box;
		border: 4rpx solid #FFFFFF;
	}

	/* 刻度文字 */
	.marks {
		position: relative;
		margin-top: 10rpx;
		height: 28rpx;
		width: 100%;

		box-sizing: border-box;
	}

	.mark {
		position: absolute;
		top: 0;

		transform: translateX(-50%);
		font-size: 24rpx;
		color: #999;
	}
</style>